<template>
  <div class="j-view-table">
    <el-table :data="tableData" :border="value.model == 'input' ? true : false" style="width: 100%" :header-cell-style="getRowClass">
      <template v-if="value.selection">
        <el-table-column type="selection" width="55"></el-table-column>
      </template>
      <template v-for="(item,index) in value.header">
        <el-table-column :key="index" :prop="item.field" :label="item.label" :width="item.labelWidth" :sortable="item.sort">

          <!-- 表格表头区 -->
          <template slot="header" slot-scope="scope">
            <div class="j-custom-th" @click="handlerChecked(scope,item)"></div>
            <div v-if="item.tips" style="z-index: 10;">
              <el-tooltip class="item" effect="dark" :content="item.headTips" placement="top">
                <span class="_tips-under">{{item.label}}</span>
              </el-tooltip>
            </div>
            <div v-else>
              {{item.label}}
            </div>
          </template>

          <!-- 表格内容区 -->
          <template slot-scope="scope">
            <tableItem :data="item" :value="value" :scope="scope" />
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script type="text/javascript">
import { mapState, mapMutations, bootstrap } from 'vuecx'
import attribute from '../../../plugins/table-attribute'
import tableItem from './tableitem'
export default {
  props: {
    value: [Object, Array],
    index: String,
  },
  components: {
    tableItem
  },
  data() {
    return {
      //列号
      columnIndex: null,
      style: 'border:dashed 1px #409EFF; padding:0px;',

      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],

      search: '',
    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {
    index(val, old) {
      if (!val == 'table-' + this.columnIndex) {
        this.style = '';
      }
    }
  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
    console.log('ssss');
  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {
    ...mapMutations(['set_attributes', 'set_pool']),



    /**
     * 选中表头
     * @return {[type]} [description]
     */
    handlerChecked(item, header, e) {
      // console.log('attribute/',attribute)



      attribute.components.forEach(item => {
        item['attribute'] = header
      })

      this.set_attributes(attribute.components)
      console.log('aaa', attribute.components);
      this.columnIndex = item.$index;

      // 防止事件冒泡
      window.event ? window.event.cancelBubble = true : e.stopPropagation();
    },


    getRowClass({ rowIndex, columnIndex }) {
      if (rowIndex === 0 && columnIndex === this.columnIndex) {
        this.$emit('index', 'table-' + this.columnIndex)
        return this.style;
      } else {
        return ''
      }
    },


    con(item,index){
      console.log('-----------------')
      console.log([index,item]);
      console.log('-----------------')
    }

  }
}

</script>
<style type="text/css" lang="scss">
.j-view-table {

  th {
    padding: 0px !important;

    .cell {
      min-height: 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
  }

  .columClass .j-custom-th {
    padding: 0px;
  }

  .j-custom-th {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
  }
}

</style>
